<template>
  <!-- 首页 -->
  <view class="home">
    <!-- 顶部 -->
    <view class="home-top">
      <u-search
        shape="square"
        animation
        placeholder="日照香炉生紫烟"
        v-model="keyword"
        :actionStyle="{ padding: '10rpx 0' }"
      ></u-search>
      <!-- 轮播图 -->
      <view class="home-top-swiper">
        <u-swiper
          indicator
          indicatorMode="line"
          circular
          height="150"
          :list="swiperList"
        ></u-swiper>
      </view>
    </view>
    <!-- 内容 -->
    <view class="home-bottom">
      <!-- 模块卡片 -->
      <view
        class="home-bottom-card"
        v-for="item in contentList"
        @click="$to(item.url)"
      >
        <!-- 顶部 -->
        <view class="home-bottom-card-top">
          <image :src="item.src"></image>
        </view>
        <!-- 顶部 -->
        <view class="home-bottom-card-bottom">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 输入框数据
      keyword: "遥看瀑布挂前川",
      // 轮播图路径
      swiperList: [
        "https://kkimgs.yisou.com/ims?f=webp&kt=url&at=smstruct&key=aHR0cHM6Ly9pbWctcW4uNTFtaXouY29tL3ByZXZpZXcvcGhvdG8vMDAvMDEvNTQvMDgvUC0xNTQwODQxLUU2QUM5MDg0LmpwZw==&sign=yx:9yMigmOuo6zPLWXstrWkwesQyAE=&tv=400_400",
        "https://kkimgs.yisou.com/ims?f=webp&kt=url&at=smstruct&key=aHR0cDovL3Btb2Y0OGRhMi5waWMxLnlzamlhbnpoYW4uY24vdXBsb2FkLzU4MzdjOWQ3YmQ2ZDMuanBn&sign=yx:YH95WFvbC3tRoz9kgz55cIZIM1o=&tv=400_400",
        "https://kkimgs.yisou.com/ims?f=webp&kt=url&at=smstruct&key=aHR0cHM6Ly9pbWcwNi50b29vcGVuLmNvbS8yMDE2MDkwNi90b29vcGVuX3N5XzE3Nzk0MTI0ODYxNy5qcGc=&sign=yx:Tb6-pN1FxU0ihmvWrmcad5qNSQ0=&tv=400_400",
      ],
      contentList: [
        {
          title: "养生知识",
          url: "/homeSubPack/yangSheng/index",
          src: "../../static/icon/yangSheng.svg",
        },
        {
          title: "中药科普",
          url: "/homeSubPack/zhongYao/index",
          src: "../../static/icon/zhongYao.svg",
        },
        {
          title: "药膳搭配",
          url: "/homeSubPack/daPei/index",
          src: "../../static/icon/daPei.svg",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.home {
  height: 100%;
  &-top {
    height: 30%;
    &-swiper {
      margin-top: 10rpx;
    }
  }
  &-bottom {
    color: var(--comom-color);
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
    &-card {
      height: 200rpx;
      width: 200rpx;
      padding-bottom: 30rpx;
      margin-top: 30rpx;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 15rpx;
      box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
      &-top {
        height: 60%;
        padding: 30rpx 30rpx 10rpx 30rpx;
        text-align: center;
        image {
          height: 100%;
          width: 80%;
        }
      }
      &-bottom {
        height: 20%;
        text-align: center;
      }
    }
  }
}
</style>
